<template>
  <el-config-provider :size="systemTheme.componentSize">
    <router-view />
  </el-config-provider>
</template>
<script setup name="App">
import { onMounted, watch, onBeforeMount, ref, nextTick } from "vue";
import { Local } from "@/Utils/storage";
import { storeToRefs } from "pinia";
import pinia from "@/Stores/index";
import { useAppSettings } from "@/Stores/appSettings";
import { useRoute } from "vue-router";
import screenfull from "screenfull";
const { systemTheme } = storeToRefs(useAppSettings());
const route = useRoute();

const storesUseAppSettings = useAppSettings(pinia);

const PC2PAD = ref(1500);
const PAD2MOBILE = ref(768);
const GetDevice = () => {
  const rect = document.body.getBoundingClientRect();
  storesUseAppSettings.changeViewSize({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  if (rect.width >= PC2PAD.value) {
    return "DESKTOP";
  } else if (rect.width >= PAD2MOBILE.value && rect.width < PC2PAD.value) {
    return "PAD";
  } else {
    return "MOBILE";
  }
};
const Resize = () => {
  if (!document.hidden) {
    OnWindowDynamics("resize");
    let curDevice = GetDevice();
    storesUseAppSettings.changeCurrentDevice(curDevice);
  }
};
const Scoll = () => {
  if (!document.hidden) {
    OnWindowDynamics("scroll");
    storesUseAppSettings.changeScroll(document.documentElement.scrollTop);
  }
};
onBeforeMount(() => {
  // 获取缓存中的布局配置
  const _appSettings = Local.get("appSettings");
  if (_appSettings) {
    _appSettings.screenfull = screenfull.isFullscreen;
    storesUseAppSettings.setAppSettings(_appSettings);
  }
  Resize();
  Scoll();
  window.addEventListener("resize", Resize);
  window.addEventListener("scroll", Scoll);
});
const OnWindowDynamics = (type) => {
  var els = document.querySelectorAll(".header-top");
  for (let index = 0; index < els.length; index++) {
    els[index].style.transition = type === "scroll" ? "1s" : "0s";
  }
};
// 页面加载时
onMounted(() => {});
</script>
<style lang="scss" scoped>
</style>
